import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/app_state.dart';
import '../constants/themes.dart';

class ThemeSelector extends StatelessWidget {
  const ThemeSelector({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer<AppState>(
      builder: (context, appState, child) {
        return Container(
          padding: const EdgeInsets.all(4),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(20),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.1),
                spreadRadius: 0,
                blurRadius: 4,
                offset: const Offset(0, 2),
              ),
            ],
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              _buildThemeButton(
                context,
                ThemeType.green,
                const Color(0xFF8FA990), // 莫兰迪绿 - 主题选择器绿色按钮的边框和选中时背景
                '绿',
                appState.currentTheme == ThemeType.green,
              ),
              const SizedBox(width: 4),
              _buildThemeButton(
                context,
                ThemeType.blue,
                const Color(0xFF8DB1CC), // 莫兰迪蓝 - 主题选择器蓝色按钮的边框和选中时背景
                '蓝',
                appState.currentTheme == ThemeType.blue,
              ),
              const SizedBox(width: 4),
              _buildThemeButton(
                context,
                ThemeType.pink,
                const Color(0xFFD4B5B3), // 莫兰迪粉 - 主题选择器粉色按钮的边框和选中时背景
                '粉',
                appState.currentTheme == ThemeType.pink,
              ),
            ],
          ),
        );
      },
    );
  }

  Widget _buildThemeButton(
    BuildContext context,
    ThemeType themeType,
    Color color,
    String label,
    bool isSelected,
  ) {
    return GestureDetector(
      onTap: () {
        context.read<AppState>().changeTheme(themeType);
      },
      child: Container(
        width: 40,
        height: 40,
        decoration: BoxDecoration(
          color: isSelected ? color : Colors.transparent,
          borderRadius: BorderRadius.circular(20),
          border: Border.all(color: color, width: 2),
        ),
        child: Center(
          child: Text(
            label,
            style: TextStyle(
              color: isSelected ? Colors.white : color,
              fontWeight: FontWeight.w600,
              fontSize: 14,
            ),
          ),
        ),
      ),
    );
  }
}
